<template>
  <div :style="style" >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "IconCoupon",
  props: {
    direction: {
      type: String,
      default: 'h'
    },
    color: {
      type: String,
      default: '#28A4F2'
    },
    width: {
      type: String,
      default: '30px'
    },
    widthPercent: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: '20px'
    },
    radius: {
      type: String,
      default: '4px'
    },
    circleSize: {
      type: String,
      default: '10%'
    },
  },
  computed: {
    isHorizontal() {
      return this.direction === 'h';
    },
    style() {
      return {
        width: this.width,
        height: this.height,
        borderRadius: this.radius,
        background: `
        radial-gradient(circle at ${this.isHorizontal ? 'left' : 'top'}, transparent ${this.circleSize}, ${this.color} 0) ${this.isHorizontal ? 'left' : 'top'} /calc(${this.widthPercent} - 10px) 90% no-repeat,
        radial-gradient(circle at ${this.isHorizontal ? 'right' : 'bottom'}, transparent ${this.circleSize}, ${this.color} 0) ${this.isHorizontal ? 'right' : 'bottom'} /calc(${this.widthPercent} - 10px) 90% no-repeat
        `
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-coupon {
  width: 20px;
  height: 40px;
  background: radial-gradient(circle at left, transparent 20%, #28A4F2 0) top left /calc(100% - 10px) 100% no-repeat,
  radial-gradient(circle at right, transparent 20%, #28A4F2 0) top right /calc(100% - 10px) 100% no-repeat;
  border-radius: 4px;
}
</style>
